<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分配菜单</title>
<script type="text/javascript">
	var listUrl = "rest/roleMenuList.do";
	var editRoleMenuUrl = "rest/roleMenuEdit.do";
	$(document)
			.ready(
					function() {
						commonTreeGrid();
					})//end ready

	function back(url) {
		$.get(url, {}, function(data) {
			$("#center").empty();
			$("#center").html(data);
			$.parser.parse($("#center"));
		});
	}

	function editRoleMenu() {
		var url = editRoleMenuUrl;
		var checkedItems = $('#menu-dg').treegrid('getChecked');
		var ids = [];
		$.each(checkedItems, function(index, item) {
			ids.push(item.id);
		});
		ids = ids.join(',');
		$.post(url, {
			roleId : "${roleId}",
			ids : ids
		},function(result) {
			//var result = eval('(' + result + ')');
            if (result.success=='true') {
                back("role/index.do");
            } else {
                $.messager.show({
                    title: 'Error',
                    msg: result.msg
                });
            }
		});

	}
	//树形grid
	function commonTreeGrid(){
	    $('#menu-dg').treegrid({
			loadMsg:'数据加载中....',
			title:'分配菜单',
		    width:'100%',
			collapsible:true, //是否可折叠的
			fitColumns:true,//自适应列宽
			singleSelect:false,//是否单选
			rownumbers:true, //行号
			pagination:false,//分页控件   .  注:如果使用分页，只给根节点分页！！！
			url:listUrl + "?roleId=${roleId}",
			idField:'id',
			treeField:'menuname',
			columns: [
				[
					{field:'id',checkbox:true},
			       	{field: 'menuname', title: '菜单名称', width: 100},
			       	{field: 'menudesc', title: '菜单描述', width: 100},
			      	{field: 'menucode', title: '菜单链接', width: 100}
				]
			],
			onUncheckAll: function (rows) {
				for(var i=0;i<rows.length;i++){
					var row =rows[i];
					row.checked=false;
				}
			},
			onCheckAll: function (rows) {
				for(var i=0;i<rows.length;i++){
					var row =rows[i];
					row.checked=true;
				}
			},
			onLoadSuccess : function(row,data) {
				if(data){
					$.each(data.rows, function(index, item) {
						if (item.checked) {
							$('#menu-dg').treegrid('select',item.id);
						}
					})
				}
				var panel = $(this).treegrid("getPanel");  
	            var gridBody = panel.find("div.datagrid-body"); 
				gridBody.find("div.datagrid-cell-check input[type=checkbox]").unbind(".treegrid").click(function(e){
					var id=$(this).parent().parent().parent().attr("node-id");
					var r = $('#menu-dg').treegrid('find',id);
					clickRow(r);
					e.stopPropagation();//停止事件传播  
				});
			},
			onClickRow:function(row){
				clickRow(row);
			}
		});
	}
	function clickRow(row){
		var status = row.checked==true?false:true;
		var method = row.checked==true?"unselect":"select";
		row.checked = status;
		$('#menu-dg').treegrid(method,row.id);
		if(row._parentId == 0){
			selectChildren(row,status,method);
		}else{
			selectChildren(row,status,method);
			selectParent(row,status,method);
		}
		function selectParent(row,status,method){
			var parent = $('#menu-dg').treegrid('getParent',row.id);
			var hasChecked = false;
			if(status){
				parent.checked=status;
				$('#menu-dg').treegrid(method,parent.id);
			}else{
				$.each($('#menu-dg').treegrid('getChildren',parent.id),function(index,item){
					if(item.checked){
						hasChecked = true;
					}
				});
				if(!hasChecked){
					parent.checked=status;
					$('#menu-dg').treegrid(method,parent.id);
				}
			}
			if(parent._parentId !=0){
				if(status){
					selectParent(parent,status,method);
				}else{
					if(!hasChecked){
						selectParent(parent,status,method);
					}
				}
			}
		}
		function selectChildren(row,status,method){
			$.each($('#menu-dg').treegrid('getChildren',row.id),function(index,item){
				$('#menu-dg').treegrid(method,item.id);
				item.checked=status;
			});
		}
	}
</script>
</head>
<body>
<div class="linkbar"><a>系统</a>/<a>角色管理</a>/<a>分配菜单</a></div>
	<div id="menu-dg" toolbar="#toolbar"></div>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true"
			onclick="editRoleMenu()">保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-undo" plain="true" onclick="back('role/index.do')">返回上级菜单</a>
	</div>
</body>
</html>